<div class="welcome">
    <style type="text/css">
        .ztree { width: 400px; }
        .ztree li span.button.add {
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
            *vertical-align: middle;
        }
        .welcome {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .welcome .tree-side {
            position: absolute;
            top: 64.83333px;
        }
        .welcome .tree-side, .welcome .tree-side .layui-side-scroll {
            width: 400px;
            height: auto;
            overflow-y: auto;
        }
        .welcome .layui-body {
            left: 400px;
        }
        .layui-side-scroll {
            width: 200px;
        }
    </style>
    <div>
        <h1 class="page-title">监控参数编辑</h1>
    </div>
    <div class="layui-side tree-side">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul id="tree-list" class="ztree">
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 表单主体区域 -->
        <div>
            <form class="layui-form" action="">
                <!-- ko if: nodeModel() !== null -->
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-form-mid">
                        <span data-bind="text: nodeModel().treeNode.name"></span>
                        <input type="hidden" name="treeNodeId" data-bind="value: nodeModel().treeNode.id" class="layui-input" />
                    </div>
                </div>
                <!-- ko if: nodeModel().isParent() === true -->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <div class="layui-form-mid">
                            <span>不是监控对象</span>
                        </div>
                    </div>
                </div>
                <!-- /ko -->
                <!-- ko if: nodeModel().isParent() === false -->
                <!-- ko if: (typeof nodeModel().info) === "object" -->
                <!-- nodeModel().info 不为 null -->
                <div class="layui-form-item">
                    <label class="layui-form-label">监控网址</label>
                    <div class="layui-input-inline">
                        <input type="hidden" name="id" data-bind="value: nodeModel().info.id" class="layui-input" />
                        <input type="text" name="url" data-bind="value: nodeModel().info.url" lay-verify="required|url" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">更新周期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="delayDays" data-bind="value: nodeModel().info.delayDays" lay-verify="required|number" class="layui-input" />
                    </div>
                    <div class="layui-form-mid">天</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">标题选择</label>
                    <div class="layui-input-inline">
                        <input type="text" name="titleSelector" data-bind="value: nodeModel().info.titleSelector" lay-verify="required" class="layui-input" />
                    </div>
                    <div class="layui-form-mid">类 JQuery 选择器</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">时间选择</label>
                    <div class="layui-input-inline">
                        <input type="text" name="timeSelector" data-bind="value: nodeModel().info.timeSelector" lay-verify="required" class="layui-input" />
                    </div>
                    <div class="layui-form-mid">类 JQuery 选择器</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">时间格式</label>
                    <div class="layui-input-inline">
                        <input type="text" name="timeFormatter" data-bind="value: nodeModel().info.timeFormatter" lay-verify="required" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="update-plan">更新查询计划</button>
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="selector-test-case">测试选择器</button>
                    </div>
                </div>
                <!-- /ko -->
                <!-- ko if: (typeof nodeModel().info) === "function" -->
                <!-- nodeModel().info 为 null -->
                <div class="layui-form-item">
                    <label class="layui-form-label">监控网址</label>
                    <div class="layui-input-inline">
                        <input type="hidden" name="id" value="-1" class="layui-input" />
                        <input type="text" name="url" lay-verify="required|url" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">更新周期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="delayDays" lay-verify="required|number" class="layui-input" />
                    </div>
                    <div class="layui-form-mid">天</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">标题选择</label>
                    <div class="layui-input-inline">
                        <input type="text" name="titleSelector" lay-verify="required" class="layui-input" />
                    </div>
                    <div class="layui-form-mid">类 JQuery 选择器</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">时间选择</label>
                    <div class="layui-input-inline">
                        <input type="text" name="timeSelector" lay-verify="required" class="layui-input" />
                    </div>
                    <div class="layui-form-mid">类 JQuery 选择器</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">时间格式</label>
                    <div class="layui-input-inline">
                        <input type="text" name="timeFormatter" lay-verify="required" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="create-plan">新建查询计划</button>
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="selector-test-case">测试选择器</button>
                    </div>
                </div>
                <!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
            </form>
        </div>
    </div>
    <div style="display: none;">
        <div id="selector-test-result">
            <table class="layui-table">
                <colgroup>
                    <col />
                    <col width="240" />
                </colgroup>
                <thead>
                <tr>
                    <th>文章标题</th>
                    <th>更新时间</th>
                </tr>
                </thead>
                <tbody data-bind="foreach: { data: testNews, as: 'eachNews' }">
                <tr>
                    <td>
                        <div style="width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" data-bind="text: eachNews.title">
                        </div>
                    </td>
                    <td data-bind="text: eachNews.updateTime"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>